(function(win , doc , $){

    win.FloatMenu = function(options){

        var me = this, i;
		
        me.options={
            menuboxLayer:null,
            FloatingDotOption:{ //圆心box
                width:50,
                height:50,
                top:0,
                left:0
            },
            floatBoxLayerOption:{ //弹窗box
                width:50,
                height:50,
                top:0,
                left:0
            },
            x:0,
            y:0,
            boxoutLayerOffset:1.25,   //偏移距离
            screenWidth:document.body.offsetWidth,  //窗口宽度
            screenHeight:document.body.offsetHeight , //窗口高度
            positionLeft:0,  //窗口二分之一的宽度
            positionTop:0,  //窗口二分之一的高度
            flatingdotHeight:0,  //中心圆的高度
            flatingdotWidth:0,  //中心圆的宽度
            half:0, //圆心底部距离弹窗底部的距离
            maxOffsetTop:0, //最大的top值
            minOffsetTop:0, //最小的top值
            maxOffsetLeft:0, //最大的left值
            minOffsetLeft:0, //最小的left值

            boxoutlayerwidth:0, //弹窗圆心的宽度
            boxoutlayerheight:0, //弹窗圆心的高度

            offsetNumTop:50, 
            offsetNumLeft:10,
			
			scrolltop:0, //浏览器卷去的高度
            rotaX:0, //旋转的度数
			
			trans:null //旋转对象
        };
        for(i in options){
            me.options[i] = options[i];
        }
        
        //初始化floatdotLayer中心圆 和 floatBoxLayer弹窗
        var floatdotLayer = doc.createElement('div');
        floatdotLayer.setAttribute('id','floatdotLayer');
        var dotinnLayerbox = doc.createElement('div');
        dotinnLayerbox.setAttribute('class','dotinnLayer');
        var lyaerIcon = doc.createElement('span');
        lyaerIcon.setAttribute('class','lyaerIcon');
        var floatBoxLayer = doc.createElement('div');
        floatBoxLayer.setAttribute('id','floatBoxLayer');
        document.body.appendChild(floatdotLayer);
        floatdotLayer.appendChild(dotinnLayerbox);
        dotinnLayerbox.appendChild(lyaerIcon);
        document.body.appendChild(floatBoxLayer);
        
        this.FloatingDot = floatdotLayer;
        this.floatBoxLayer = floatBoxLayer;
        
        //转jquery对象
        this.$FloatingDot = $(this.FloatingDot);
        this.$floatBoxLayer = $(this.floatBoxLayer);

        var clientRec = this.FloatingDot.getBoundingClientRect();

        //浮动圆心的位置
        var innlayer = this.$FloatingDot.find('.dotinnLayer');
        innlayer.css({'width':me.options.FloatingDotOption.width+'px','height':me.options.FloatingDotOption.height+'px'});
        var innLyaerIcon = this.$FloatingDot.find('.lyaerIcon');
        innLyaerIcon.css({'width':me.options.FloatingDotOption.width/2,'height':me.options.FloatingDotOption.height/2});
        innLyaerIcon.css({'left':me.options.FloatingDotOption.width/2-innLyaerIcon.width()/2,top:me.options.FloatingDotOption.height/2-innLyaerIcon.height()/2});
        //中心圆的大小
        me.options.flatingdotHeight = this.$FloatingDot.height();
        me.options.flatingdotWidth = this.$FloatingDot.width();

        //弹窗的小圆心大小
        me.options.boxoutlayerwidth = me.options.FloatingDotOption.width/me.options.boxoutLayerOffset;
        me.options.boxoutlayerheight= me.options.FloatingDotOption.height/me.options.boxoutLayerOffset;

        //弹窗宽度高度
        me.options.floatBoxLayerOption.width = me.options.boxoutlayerwidth * 2 + me.options.FloatingDotOption.width;  //2个小圆宽度+中心圆宽度
        me.options.floatBoxLayerOption.height = me.options.boxoutlayerheight * 3 + me.options.FloatingDotOption.height; //3个小圆的高度+中心的高度

        //left  top最大最小值
        me.options.half = me.options.flatingdotHeight + (me.options.floatBoxLayerOption.height-me.options.flatingdotHeight)/2;
        me._reckon();

        //初始化中心圆的left  top
        this.options.y = me.options.FloatingDotOption.top=me.options.maxOffsetTop;
        this.options.x = me.options.FloatingDotOption.left=me.options.maxOffsetLeft;
        this.$FloatingDot.css({'top':me.options.FloatingDotOption.top,'left':me.options.FloatingDotOption.left});

        //初始化弹窗位置
        me.options.floatBoxLayerOption.top = me.options.FloatingDotOption.top-me.options.FloatingDotOption.height*me.options.boxoutLayerOffset;
        me.options.floatBoxLayerOption.left = me.options.FloatingDotOption.left-me.options.floatBoxLayerOption.width+me.options.flatingdotWidth;
        this.$floatBoxLayer.css({'width':me.options.floatBoxLayerOption.width,'height':me.options.floatBoxLayerOption.height,
            'top':me.options.floatBoxLayerOption.top,'left':me.options.floatBoxLayerOption.left});

        this.START_EV = 'touchstart',
        this.MOVE_EV = 'touchmove',
        this.END_EV = 'touchend',
        this.START_CLICK = 'click';
        
        //绑定事件
        me._bind(this.START_EV);
        me._bind(this.END_EV);
        me._bind(this.MOVE_EV);
        me._bind(this.START_CLICK);
        
        //浏览器滚动处理
        me._onscroll();
    };

    win.FloatMenu.prototype = {
        handleEvent: function (e) {
            var me = this;
            switch(e.type) {
                case this.MOVE_EV: me._move(e); break;
                case this.END_EV:me._end(e);break;
                case this.START_CLICK:me._click();break;
            }
        },
        _bind: function (type, el, bubble) {
            (el || this.FloatingDot).addEventListener(type, this, !!bubble);
        },
        _reckon:function(){
            var me = this;
            me.options.maxOffsetTop = me.options.screenHeight - me.options.half + me.options.scrolltop; //最大的top值
            me.options.minOffsetTop = me.options.half - me.options.flatingdotHeight + me.options.scrolltop; //最小的top值
            me.options.maxOffsetLeft = me.options.screenWidth - me.options.boxoutlayerwidth * me.options.boxoutLayerOffset - 5; //最大left值
            me.options.minOffsetLeft = 5; //最小left值
        },
        _onscroll:function(){
            var me = this;
            window.onscroll = function() {
                
                var scrolltop = document.body.scrollTop;
                var scrollleft = document.body.scrollLeft;
                me.options.screenHeight = document.body.offsetHeight;
                me.options.screenWidth = window.screen.width;
                me._reckon();
                var dottop = parseInt(me.FloatingDot.style.top.replace(/[a-z]{2}/,''));
                if(scrolltop > me.options.scrolltop){ //向下滑动
                    if(dottop < me.options.maxOffsetTop) {
                        //中心圆的top值 + 总的卷去top - 上一次卷去的top = 要下滑的top
                        me.options.y = me.options.FloatingDotOption.top = dottop + (scrolltop - me.options.scrolltop);
                        me.FloatingDot.style.top = me.options.FloatingDotOption.top + 'px';
                    }
                }
                else{ //向上滑动
                    if(dottop >  me.options.minOffsetTop) {
                        me.options.y = me.options.FloatingDotOption.top = dottop - (me.options.scrolltop - scrolltop);
                        me.FloatingDot.style.top = me.options.FloatingDotOption.top + 'px';
                    }
                }
                me.options.floatBoxLayerOption.top = me.options.FloatingDotOption.top-me.options.half+me.options.flatingdotHeight;
            	me.$floatBoxLayer.css({'top':me.options.floatBoxLayerOption.top});
                me.options.scrolltop = scrolltop;
            };
        },
        _click:function(event){
        	var e = event || window.event;
        	e.preventDefault();
            e.stopPropagation();
            if(!this.$FloatingDot.hasClass('dasble')) {
                this.$FloatingDot.addClass('dasble');
                var me = this;
                if (me.options.trans != null) {
                    clearInterval(me.options.trans);
                }
                var layericon = $('.lyaerIcon');
                var showstatus = this.$floatBoxLayer.hasClass('ficp');
                if (showstatus) {
                    me.$floatBoxLayer.removeClass('ficp');
                    me.$floatBoxLayer.fadeOut('slow');
                } else {
                    me.$floatBoxLayer.addClass('ficp');
                    me.$floatBoxLayer.fadeIn('slow');
                }

                var wz = me.options.x <= me.options.positionLeft ? false : true;
                var trans = setInterval(function () {
                    var bds = me.options.rotaX > 180 || me.options.rotaX < 0;
                    if (wz) {
                        showstatus ? me.options.rotaX -= 60 : me.options.rotaX += 60;
                        bds = me.options.rotaX > 180 || me.options.rotaX < 0;
                    }
                    else {
                        showstatus ? me.options.rotaX += 60 : me.options.rotaX -= 60;
                        bds = Math.abs(me.options.rotaX) > 180 || me.options.rotaX > 0;
                    }
                    if (bds) {
                        clearInterval(trans);
                        me.$FloatingDot.removeClass('dasble');
                    } else {
                        layericon.css({
                            '-webkit-transform': 'rotate(' + me.options.rotaX + 'deg)',
                            'transform': 'rotate(' + me.options.rotaX + 'deg)',
                            '-moz-transform': 'rotate(' + me.options.rotaX + 'deg)'
                        });
                    }
                }, 100);
            }

        },
        _move:function(event){
            var e = event || window.event;
            e.preventDefault();
            e.stopPropagation();
     
            var targettouches = e.targetTouches;
            if(targettouches.length>0){
                
				this.options.screenHeight = document.body.offsetHeight;
                this.options.screenWidth = window.screen.width;
                this._reckon();
                var touch = event.targetTouches[0];

                this.options.positionLeft =  this.options.screenWidth/2;
                this.options.positionTop =   this.options.screenHeight/2;
				
                this.options.y = touch.pageY-(this.options.flatingdotHeight/2);
                this.options.x = touch.pageX-(this.options.flatingdotWidth/2);
				if(this.options.x < 0) {this.options.x = 5;}
				this.FloatingDot.style.left = this.options.x+'px';
				console.log(this.options.x);
				//如果往右边滑动box的left 等于  dot的left 达到跟随dot滑动
				if(this.options.FloatingDotOption.left < this.options.x){
					this.options.floatBoxLayerOption.left = this.options.x;
				}else{
					//往左边滑动 box的left 等于 dot的left - box的宽度 + dot的宽度
					this.options.floatBoxLayerOption.left = this.options.x-this.options.floatBoxLayerOption.width+this.options.flatingdotWidth;
				}
				
				
	            //固定top位置
	            if(this.options.y <= this.options.positionTop && this.options.y<=this.options.minOffsetTop){
	                this.options.FloatingDotOption.top = this.options.minOffsetTop;
	                this.FloatingDot.style.top = this.options.minOffsetTop+'px';
	            }else{
	                if(this.options.y>=this.options.maxOffsetTop) {
	                    this.options.FloatingDotOption.top = this.options.maxOffsetTop;
	                    this.FloatingDot.style.top = this.options.maxOffsetTop + 'px';
	                }else{
	                	this.options.FloatingDotOption.top = this.options.y;
	                	this.FloatingDot.style.top = this.options.y+'px';
	                }
	            }
            	
            	
             	this.options.floatBoxLayerOption.top = this.options.FloatingDotOption.top-this.options.half+this.options.flatingdotHeight;
            	this.$floatBoxLayer.css({'top':this.options.floatBoxLayerOption.top,'left':this.options.floatBoxLayerOption.left});
            }
        },
        _end:function(){
        
        	//固定left位置
	        if(this.options.x <= this.options.positionLeft){
	               this.options.floatBoxLayerOption.left = this.options.FloatingDotOption.left = this.options.minOffsetLeft;
	               this.options.x = this.options.minOffsetLeft;
	               this.FloatingDot.style.left = this.options.minOffsetLeft+'px';
	         }else{
	               this.options.FloatingDotOption.left = this.options.maxOffsetLeft;
	               this.options.floatBoxLayerOption.left = this.options.screenWidth-this.$floatBoxLayer.width()-5;
	               this.FloatingDot.style.left = this.options.maxOffsetLeft+'px';
	        }
	            
            this.options.floatBoxLayerOption.top = this.options.FloatingDotOption.top-this.options.half+this.options.flatingdotHeight;
            this.$floatBoxLayer.css({'top':this.options.floatBoxLayerOption.top,'left':this.options.floatBoxLayerOption.left});
            this._painting();
        },
        _painting:function(){
            var me = this;
            var boxArr = me.options.menuboxLayer;
            var posTop = 0,posBottom= 0,posLeft=0;
            posTop = me.options.half - me.options.flatingdotHeight - me.options.boxoutlayerheight - 8;
            posBottom = me.options.half + 8;
            posLeft = me.options.flatingdotWidth;

            this.floatBoxLayer.innerHTML='';
            var temptop = 0;
            for(var i=0;i<boxArr.length;i++){
                var callback = boxArr[i].id;
                me.options.callback = function(){};
                var inl = doc.createElement('div');
                inl.setAttribute('class','dotinnLayer');
                inl.setAttribute('id',callback);
                this.floatBoxLayer.appendChild(inl);
                var iconbox = doc.createElement('i');
                iconbox.setAttribute('class','iconbox');
                var labelbox = doc.createElement('label');
                labelbox.setAttribute('class','labelbox');
                inl.appendChild(iconbox);
                inl.appendChild(labelbox);
				if(boxArr[i].events){
					inl.addEventListener(boxArr[i].events,me.options[callback],false);
				}
                labelbox.innerText=boxArr[i].txt;
                $(iconbox).css({'backgroundImage':'url('+boxArr[i].icon+')'});
                inl.style.width = this.options.boxoutlayerwidth+'px';
                inl.style.height = this.options.boxoutlayerheight+'px';
                if(boxArr[i].pos === 'top' || boxArr[i].pos === 'bottom'){ //上下两个圆心
                    boxArr[i].pos === 'top' ? inl.style.top = posTop + 'px' : inl.style.top = posBottom + 'px';
                    if (this.options.x <= this.options.positionLeft) {
                        inl.style.left =  '10px';
                    }else{
                        inl.style.left =  (me.options.floatBoxLayerOption.width  - me.options.flatingdotWidth)+'px';
                    }
                }else { //左右圆
                    temptop += $(inl).height() + 8;
                    inl.style.top = temptop + 'px';
                    if (this.options.x <= this.options.positionLeft) { //左边
                        inl.style.left = (posLeft+10) + 'px';
                    } else {
                        inl.style.left = (me.options.floatBoxLayerOption.width - me.options.flatingdotWidth - me.options.boxoutlayerwidth - 10)+'px';
                    }
                }
            }


        }
    };
	
})(window , document , jQuery);